<template>
  <a-form :model="ruleForm"
          ref="ruleForm"
          v-bind="layout"
          :rules="rules"
          @finish="handleFinish">
    <a-form-item label="实验名称" name="experiment_name">
      <a-select
        v-model:value="ruleForm.experiment_name"
        style="width: 120px"
        ref="select"
      >
        <a-select-option
          v-for="item in experimentNameSelectionOptions"
          :key="item.url"
        >
          {{ item.label }}
        </a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="实验方案名称" name="experiment_program_name">
      <a-select
        v-model:value="ruleForm.experiment_program_name"
        style="width: 120px"
        ref="select"
      >
        <a-select-option
          v-for="item in experimentProgramNameSelectionOptions"
          :key="item.url"
        >
          {{ item.label }}
        </a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="实验编码" name="experiment_code">
      <a-input v-model:value="ruleForm.experiment_code" />
    </a-form-item>
    <a-form-item label="实验原理" name="experimental_principle">
      <a-input v-model:value="ruleForm.experimental_principle" />
    </a-form-item>
    <a-form-item label="实验记录" name="experiment_record">
      <a-input v-model:value="ruleForm.experiment_record" />
    </a-form-item>
    <a-form-item label="实验现象" name="experiment_phenomena">
      <a-input v-model:value="ruleForm.experiment_phenomena" />
    </a-form-item>
    <a-form-item label="原料名称" name="raw_material_name">
      <a-input v-model:value="ruleForm.raw_material_name" />
    </a-form-item>
    <a-form-item label="纯度" name="purity">
      <a-input v-model:value="ruleForm.purity" />
    </a-form-item>
    <a-form-item label="原料来源" name="raw_material_source">
      <a-input v-model:value="ruleForm.raw_material_source" />
    </a-form-item>
    <a-form-item label="设备名称" name="equipment_name">
      <a-input v-model:value="ruleForm.equipment_name" />
    </a-form-item>
    <a-form-item label="设备厂家" name="equipment_manufacturer">
      <a-input v-model:value="ruleForm.equipment_manufacturer" />
    </a-form-item>
    <a-form-item label="设备型号" name="device_model">
      <a-input v-model:value="ruleForm.device_model" />
    </a-form-item>
    <a-form-item label="数量" name="quantity">
      <a-input v-model:value="ruleForm.quantity" />
    </a-form-item>
    <a-form-item label="实验步骤" name="equipment_steps">
      <a-input v-model:value="ruleForm.equipment_steps" />
    </a-form-item>
    <a-form-item label="样品编号" name="sample_num">
      <a-input v-model:value="ruleForm.sample_num" />
    </a-form-item>
    <a-form-item label="实验预期" name="experimental_expectation">
      <a-input v-model:value="ruleForm.experimental_expectation" />
    </a-form-item>
    <!-- <a-form-item label="审核人" name="experiment_procedure_reviewer">
      <a-select
        v-model:value="ruleForm.experiment_procedure_reviewer"
        style="width: 120px"
        ref="select"
      >
        <a-select-option
          v-for="item in experimentProcedureReviewerSelectionOptions"
          :key="item.url"
        >
          {{ item.label }}
        </a-select-option>
      </a-select>
    </a-form-item> -->
    <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
      <a-button type="primary" :loading="submitting" html-type="submit">
        {{ submitting ? '提交中' : '确定' }}
      </a-button>
    </a-form-item>
  </a-form>
</template>

<script>
import { message } from 'ant-design-vue'
export default {
  name: 'AddOrEditExperimentProcedure',
  props: ['url'],
  emits: ['operate-success', 'operate-failed'],
  data() {
        let validateExperimentName = async (rule, value) => {
      if (value === "") {
        return Promise.reject("请选择实验名称");
      }
    };
    let validateExperimentProgramName = async (rule, value) => {
      // console.log('gsdadas', value)
      if (value === "") {
        return Promise.reject("请选择实验方案名称");
      }
    };
    return {
      ruleForm: {
        experiment_name: '',
        experiment_program_name: '',
        experiment_code: '',
        experimental_principle: '',
        experiment_record: '',
        experiment_phenomena: '',
        raw_material_name: '',
        purity: '',
        raw_material_source: '',
        equipment_name: '',
        equipment_manufacturer: '',
        device_model: '',
        quantity: '',
        equipment_steps: '',
        sample_num: '',
        experimental_expectation: '',
        // experiment_procedure_reviewer: '',
      },
      rules: {
        experiment_program_name: [
          {
            validator: validateExperimentProgramName,
            trigger: "change",
            required: true,
            whitespace: true,
          },
        ],
        experiment_name: [
          {
            validator: validateExperimentName,
            trigger: "change",
            required: true,
            whitespace: true,
          },
        ],
      },
      layout: {
        labelCol: { span: 6},
        wrapperCol: { span: 14 },
      },
      submitting: false,
      experimentNameSelectionOptions: [],
      experimentProgramNameSelectionOptions: [],
      // experimentProcedureReviewerSelectionOptions: [],
      headers: {
        authorization: 'authorization-text',
      },
    }
  },
  mounted() {
    this.fetch()
  },
  methods: {
    fetch() {
      this.experimentNameSelectionOptions = []
      this.experimentProgramNameSelectionOptions = []
      // this.experimentProcedureReviewerSelectionOptions = []
      // this.axios.get('/user_management/users').then((res) => {
      //   const data = res.data
      //   for (let i = 0; i < data.length; ++i) {
      //     this.experimentProcedureReviewerSelectionOptions.push({
      //       url: data[i].url,
      //       label: data[i].username,
      //     })
      //   }
      // })
      this.axios.get('/experiment_management/experiment_design').then((res) => {
        const data = res.data
        for (let i = 0; i < data.length; ++i) {
          this.experimentProgramNameSelectionOptions.push({
            url: data[i].url,
            label: data[i].experiment_program_name,
          })
        }
      })
      this.axios
        .get('/experiment_management/get_passed_experiment/')
        .then((res) => {
          const data = res.data
          for (let i = 0; i < data.length; ++i) {
            this.experimentNameSelectionOptions.push({
              url:
                'http://127.0.0.1:8000/api/experiment_management/experiment_information/' +
                data[i].experiment_id +
                '/',
              label: data[i].experiment_name,
            })
          }
          this.ruleForm.experiment_name = data.length === 0 ? '' : data[0].url
          if (this.url !== '') {
            this.axios
              .get(this.url)
              .then((res) => {
                const data = res.data
                this.ruleForm.experiment_name = data.experiment_name
                this.ruleForm.experiment_program_name =
                  data.experiment_program_name
                this.ruleForm.experiment_code = data.experiment_code
                this.ruleForm.experimental_principle =
                  data.experimental_principle
                this.ruleForm.experiment_record = data.experiment_record
                this.ruleForm.experiment_phenomena = data.experiment_phenomena
                this.ruleForm.raw_material_name = data.raw_material_name
                this.ruleForm.purity = data.purity
                this.ruleForm.raw_material_source = data.raw_material_source
                this.ruleForm.equipment_name = data.equipment_name
                this.ruleForm.equipment_manufacturer =
                  data.equipment_manufacturer
                this.ruleForm.device_model = data.device_model
                this.ruleForm.quantity = data.quantity
                this.ruleForm.equipment_steps = data.equipment_steps
                this.ruleForm.sample_num = data.sample_num
                this.ruleForm.experimental_expectation =
                  data.experimental_expectation
                this.ruleForm.experiment_procedure_reviewer =
                  data.experiment_procedure_reviewer
              })
              .catch((error) => {
                console.log('Error', error.message)
              })
          }
        })
        .catch((error) => {
          console.log('Error', error.message)
          this.ruleForm.experiment_name = ''
        })
    },
    handleFinish(values) {
      this.submitting = true
      const formData = new FormData()
      formData.append('experiment_name', values.experiment_name)
      formData.append('experiment_program_name', values.experiment_program_name)
      formData.append('experiment_code', values.experiment_code)
      formData.append('experimental_principle', values.experimental_principle)
      formData.append('experiment_record', values.experiment_record)
      formData.append('experiment_phenomena', values.experiment_phenomena)
      formData.append('raw_material_name', values.raw_material_name)
      formData.append('purity', values.purity)
      formData.append('raw_material_source', values.raw_material_source)
      formData.append('equipment_name', values.equipment_name)
      formData.append('equipment_manufacturer', values.equipment_manufacturer)
      formData.append('device_model', values.device_model)
      formData.append('quantity', values.quantity)
      formData.append('equipment_steps', values.equipment_steps)
      formData.append('sample_num', values.sample_num)
      formData.append(
        'experimental_expectation',
        values.experimental_expectation
      )
      // formData.append(
      //   'experiment_procedure_reviewer',
      //   values.experiment_procedure_reviewer
      // )
      if (this.url !== '') {
        this.axios
          .put(this.url, formData)
          .then(() => {
            this.submitting = false
            message.success('修改成功！')
            this.$emit('operate-success')
          })
          .catch((error) => {
            this.submitting = false
            message.error('修改失败！')
            this.$emit('operate-failed')
            console.log('Error', error.message)
          })
      } else {
        this.axios
          .post('/experiment_management/experiment_procedure/', formData)
          .then(() => {
            this.submitting = false
            message.success('添加成功！')
            this.$emit('operate-success')
          })
          .catch((error) => {
            this.submitting = false
            message.error('添加失败！')
            this.$emit('operate-failed')
            console.log('Error', error.message)
          })
      }
    },
  },
}
</script>
